<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>档案管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/static/dist/css/skins/all-skins.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-treeview.css">
    <link rel="stylesheet" href="/static/css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="/static/layer/theme/default/layer.css">
    <link rel="stylesheet" href="/static/webCss/flfg.css?v=shujubuwqd12138">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/static/plugins/ie9/html5shiv.min.js"></script>
    <script src="/static/plugins/ie9/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition skin-blue" style="font-size: medium">

<div class="content row" id="yhgl">
    <!--<div id="addtool" class="btn-group">-->
        <!--<span class="btn btn-primary" data-toggle="modal" data-target="#addUserModel">添加用户</span>-->
    <!--</div>-->
    <div class=" col-xs-12">
        <div>
            <div class="box-body">
                <table class="table table-bordered table-hover text-center" id="userTable" style="table-layout: fixed;">

                </table>
            </div>
        </div>
    </div>
</div>

<script src="/static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<!-- Slimscroll -->
<script src="/static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/static/plugins/fastclick/fastclick.js"></script>

<!-- AdminLTE App -->
<script src="/static/dist/js/app.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/dist/js/demo.js"></script>
<!--tabs-->
<script src="/static/dist/js/app_iframe.js"></script>
<script src="/static/js/bootstrap-treeview.js"></script>
<script src="/static/js/bootstrapValidator.min.js"></script>
<script src="/static/js/bootstrap-table.min.js"></script>
<script src="/static/js/bootstrap-table-zh-CN.js"></script>
<script src="/static/js/vue.js"></script>
<script src="/static/js/vue-resource.min.js"></script>
<script src="/static/layer/layer.js"></script>
<script src="/static/js/myJs.js?v=shujubuwqd12138"></script>
<script src="/static/js/newJs.js?v=shujubuwqd12138"></script>

<script type="text/javascript">
    newCss("/static/webCss/flfg.css");
    function paramsMatter(value,row,index) {
        var span=document.createElement('span');
        span.setAttribute('title',value);
        span.innerHTML = value;
        return span.outerHTML;
    }
    function downLoad(id){
        window.location.href='/fglr/api/downloadFg?id='+id;
    }

    function showPdf(id) {
        var u = '/fglr/api/previewFg/'+id;
        top.addTabs({
            id: "63233",
            text: "PDF浏览器",
            icon: "fa fa-circle-o",
            url: "/static/pdf/web/viewer.html?file="+u,
            targetType: "iframe-tab",
            close:true
        });
    }

    var vue = new Vue({
        el: '#yhgl',
        data: {
            allRole:null,
            newUser:{
                name:null,
                dw:null,
                phone:null,
                roleId:null,
                account:null,
                password:null,
            }
        },
        methods: {
            addUser: function () {
                var bootstrapValidator1 = $("#userForm").data('bootstrapValidator');
                bootstrapValidator1.validate();
                if(bootstrapValidator1.isValid()){
                    var myMsg = cxLoad("添加中");
                    this.$http.post('/addUser',this.newUser,{emulateJSON:true}).then( function (result) {
                        var data = result.body;
                        if(data.code == 200){
                            layer.close(myMsg);
                            cxAlertOk("添加成功");
                            $('#addUserModel').modal('hide');
                            $("#userTable").bootstrapTable('refresh');
                            this.newUser.name=null;
                            this.newUser.dw=null;
                            this.newUser.phone=null;
                            this.newUser.roleId=null;
                            this.newUser.account=null;
                            this.newUser.password=null;
                        }else{
                            layer.close(myMsg);
                            cxAlert(data.mess);
                        }
                    })
                }
            }
        },
        created: function () {
            this.$http.get('/getAllRole').then( function (result) {
                var data = result.body;
                if(data.code == 200){
                    this.allRole = data.data;
                }
            })
        },
        mounted: function () {
            $("#userTable").bootstrapTable('destroy');
            $('#userTable').bootstrapTable({
                url: '/fglr/api/queryAll',
                contentType: "application/json; charset=UTF-8",
                type: "GET",
                dataType: 'json',
                queryParamsType: "",
                singleSelect: true,
                paginationShowPageGo: true,
                pageNumber:1,
                pageSize:10,
                queryParams: function (params) {
                    return {'pageNum':params.pageNumber,'pageSize':params.pageSize};
                },
                striped: true,
                smartDisplay:false,
                cache: false,
                pagination: true,
                pageList: [8],
                sidePagination: 'server',
                toolbar: "#addtool",
                columns: [{
                    field: 'name',
                    title: '文件名',
                    formatter:paramsMatter
                },{
                    field: 'uploadtime',
                    title: '上传时间',
                    formatter:paramsMatter
                },{
                    field: 'uplodusername',
                    title: '上传人',
                    formatter:paramsMatter
                },{
                    title: '操作',
                    formatter: function (value, row, index) {
                        var aStr = '<a class="btn-primary btn" href="javascript:showPdf(\''+row.id+'\')">查看</a>';
                        aStr += '<a class="btn-default btn" href="javascript:downLoad(\''+row.id+'\')">下载</a>';
                        return aStr;
                    },
                }],
                responseHandler: function (res) {  //后台返回的结果
                    if (res.code == "200") {
                        var data = res.data.data;
                        var NewData = [];
                        for(i=0;i<data.length;i++){
                            var dd = data[i];
                            // dd.roleName = roleId2RoleName(dd.roleId);
                            NewData.push(dd);
                        }
                        var data = {
                            total: res.data.total,
                            rows: NewData
                        };
                        return data;
                    }
                }
            });

        }
    });


</script>

</body>
</html>
